<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.webime">
<title>Web Input</title>

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">
<link rel="stylesheet" href="/content/info.niwota.webime/assets/opt/style/jquery.autocomplete.css" type="text/css">

<style type="text/css">

ul {
	list-style: disc inside;
	margin-left: 1em;
}

#content {
	padding: 10px;
}

label {
	float: left;
	width: 12em;
}

input[type=text] { width: 15em; }

</style>

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/opt/ui/tooltip/qtip/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>
<script type='text/javascript' src="/content/info.niwota.webime/assets/opt/script/jquery.ajaxQueue.js"></script>
<script type='text/javascript' src="/content/info.niwota.webime/assets/opt/script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/content/info.niwota.webime/assets/script/custom.js"></script>

<script type="text/javascript">
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait..." ><span style="color: white; font-size: xx-large;">...<blink>.....</blink></span>';
var jsonp = '/content/info.niwota.webime/jsonp/webime/updateInput?type=json&callback=?';
var googlesuggest = 'http://google.com/complete/search';

$.ajaxSetup ({  
	cache: false  
}); 

$(document).ready(function(){
	$.initOptionMenu();
	//
	initForm();
	initSuggest();
});

function showBusy(timeout, msg) {
	var tag = $('#status');
	
	var t = timeout || 3000;
	var m = msg || '';
	tag.html(spinner);
	var timer = setTimeout(function(){ tag.html(m).css({ "color": "#ff0000" }); }, t);
	
	this.cancel = function() {
		clearTimeout(timer);
		tag.empty();
	}
	
	return this;
}

function initForm() {
	$("#submit1").click(function() {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});
	$("#submit2").click(function() {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});
	$("#submit3").click(function() {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});

	$('#input').focus(function() {
		$('#status').text('');
	});
}

var busy = null;

function doSubmit(act) {
	var err = $('#status');
	var v = $('#input').val();

	err.text(''); 
					
	var url = jsonp + '&action='+ act + '&input=' + v ;
	busy = showBusy(5000, 'Timeout, please try again.');

	$.getJSON(url, function(d) { callback(d);});
		
	return false;
}

function callback(d) {
	if (busy) {
		busy.cancel();
	}
	var tag = $('#status');
	if (d && d.rc == false) {
		tag.html(d.error).css({ "color": "#ff0000" });
	} else {
		var fin = $('#input');
		fin.val('');
		tag.empty();
	}
}

function initSuggest() {

	$('#gsuggest').change(
		function() {
			var chk = $('#gsuggest').is(':checked');
			if (chk) {
				initAutoComplete();
			} else {
				$('#input').unautocomplete();
			}
		}
	);
	
	initAutoComplete();
}

function initAutoComplete() {
	$('#input').autocomplete(googlesuggest, {
		width: 512,
		multiple: true,
		multipleSeparator: ' ',
		matchContains: true,
		parse: parseData,
		dataType: 'jsonp'
	});
}

function parseData(d) {
	var parsed = [];
	if (d && d.length > 1) {
		var sa = d[1];
		for (var i = 0; i < sa.length; i++) {
			var w = $.trim(sa[i][0]);
			if (w) {
				w = w.split("|");
				parsed[parsed.length] = {
					data: w,
					value: w[0],
					result: w[0]
				};
			}
		}
	}
	return parsed;
}
</script>
</head>
<body>

<div id="topnav">
	<a class="logo" href="/content/info.niwota.webime" title="Enter from the web">
	<img class="icon32" src="/icon/info.niwota.webime"  alt="" >
	<span>Web Input</span>
	</a>

	<span class="top-center"></span>
	
	<span class="top-right" style="margin-right: 64px;">

	<span class="action"><a class="" target="help" href="/content/info.niwota.webime/assets/help.htm" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>
	
	</span>
</div>

<!--page content-->
<div id="page-content">

<div style="clear: both;"></div>

<div id="content" style="z-index: 1000; ">

<form name="inputform" id="inputform" autocomplete="off" method="post"
	action="/content/info.niwota.webime/"  
	enctype="application/x-www-form-urlencoded">
	<p><input type="checkbox" id="gsuggest" name="gsuggest" value="gsuggest" checked="checked" />
	<span style="color: #0ff;">Google suggest</span></p>
	<p>
	<textarea name="input" id="input" style="width: 512px; height: 96px;"></textarea><br />
	
	<input type="submit" value="ENTER" name="submit1" id="submit1" />
	<input type="submit" value="NEXT" name="submit2" id="submit2" />
	<input type="submit" value="DONE" name="submit3" id="submit3" />

	</p>
	<p><span id="status" style="color: #f00;"></span></p>
</form> 

</div>

</div>
<!--//page content-->

<div id="optionmenu">
<a class="" target="help" href="/content/info.niwota.webime/assets/help.htm" title="Help" ><img src="/res/drawable/ic_menu_help" /></a>
<a href="#" title="Quit" onclick="self.close();"><img src="/res/drawable/ic_menu_done" /></a>
</div>

<div id="footer">

<span style="color: #fff;">Web Input 1.0.0 &copy; 2010 All rights reserved</span> 

</div>

<div id="wallpaper" style="display: block;"><img src="/wallpaper" width="100%" height="100%" /></div>

</body>
</html>